<template>
  <div class="call-center-workbench-zhongTong" v-loading.fullscreen.lock="loadingListData" >
    <div class="left">
      <div class="current-header">
        <span>{{$t('callcenter.workbenchPage.currentCall')}}</span>   
        <div class="btn-wrap" v-if="haveRing">
          <template v-if="consultStatus == 3 || consultStatus == 2">
            <el-button size="mini" type="primary" @click="ctiConsultReturnCallBack">{{$t('callcenter.workbenchPage.consultReturnCallBack')}}</el-button>
          </template>
          <template v-if="consultStatus == 3">
            <el-button size="mini" type="primary" @click="ctiConsultTransferCallBack">{{$t('callcenter.workbenchPage.consultReturnTransfer')}}</el-button>
          </template>
          <template v-if="showConsult">
            <el-button size="mini" type="primary" @click="transferClick" :loading="consultStatus==2">{{consultStatus==1?$t('callcenter.workbenchPage.consultStatus1'):$t('callcenter.workbenchPage.consultStatus2')}}</el-button>
          </template>
          <el-button size="mini" type="danger" @click="hangUpCall">{{$t('callcenter.workbenchPage.hangUp')}}</el-button>
        </div>
      </div>
      <el-card v-if="query.callPhone && query.callState === 'phoneConnect'" class="current-card" :class="{'active':onCallItem.id == activeLinkId}">
        <div class="current-item" @click="currentCallClick">
          <div class="item">
            <p>{{query.linkmanName ? `${query.linkmanName} ${query.callPhone}` : $t('callcenter.workbenchPage.unknownLinkman')}} </p>
            <span>{{ringTime}}</span>
          </div>
          <div class="item">
            <p style="margin-bottom:0">{{query.customerName}}</p>
            <i class="iconfont" style="color:#55B7B4" :class="query.callType === 1 ? 'icon-qudian' : 'icon-laidian'"></i>
          </div>
        </div>
      </el-card>
      <el-card class="history-card">
        <div slot="header">{{$t('callcenter.workbenchPage.todayHistoryCall')}}{{recordListPage.total}}</div>
        <div v-if="recordListPage.list.length != 0">
          <div v-for="(item,index) in recordListPage.list" :key="item.id" class="history-item" 
               :class="{'item-active': item.id == activeLinkId,'item-hover':index==hoverIndex}"
               @click="handleHistoryItem(item,index)"
               @mouseover="hoverIndex = index"
               @mouseout="hoverIndex = -1">
            <i v-if="hoverIndex===index && item.id != activeLinkId" class="iconfont icon-fe-close" @click.stop="delHistoryItem(index,item)"></i>
            <div class="current-item">
              <div class="item">
                <p>{{item.linkmanName}} {{item.dialPhone}}</p>
                <span>{{item.ring |fmt_short_time}}</span>
              </div>
              <div class="item">
                <p style="margin-bottom:0;color:#999;">{{item.customerName}}</p>
                <i class="iconfont" :class="item.callType === 'dialout' ? 'icon-qudian' : 'icon-laidian'"></i>
              </div>
            </div>

          </div>
          <div class="call-center-list-footer">
            <button class="call-center-list-footer-more" @click="getMore" v-if="moreShow && !loading">{{$t('common.base.tip.loadMore')}}</button>
            <div v-if="loading">{{$t('common.base.isLoading')}}</div>
            <div v-if="!moreShow && !loading">
              <span class="call-center-list-footer-line"></span>
              <span class="call-center-list-footer-text">{{$t('common.base.tip.noMoreData2')}}</span>
              <span class="call-center-list-footer-line"></span>
            </div>
          </div>
        </div>
        <div class="call-center-list-footer" v-else-if="recordListPage.list.length == 0 && !loading">{{$t('common.base.tip.noData')}}</div>
        <div class="call-center-list-footer" v-else>{{$t('common.base.isLoading')}}</div>
      </el-card>
    </div>
    <div class="main">
      <base-tabbar :tabs="tabs" v-model="currTab" @tab-click="tabClick"></base-tabbar>
      <component :is="currTab" :bind-productId="bindProductId" :item="item" :key="item.id" @updateCustomerId="updateCustomerId" @getCallRecord="e => callDetail = e"></component>
    </div>
    <div class="right">
      <el-tabs v-model="rightActiveTab">
        <el-tab-pane :label="$t('common.base.serviceRemark')" name="1"> </el-tab-pane>
        <el-tab-pane :label="$t('common.tabs.productDerail')" name="2"> </el-tab-pane>
        <el-tab-pane v-if="satisfactionGray" :label="$t('common.tabs.im.tabs3')" name="3"> </el-tab-pane>
      </el-tabs>

      <!-- 服务备注 -->
      <div v-show="rightActiveTab === '1'" style="height:calc(100% - 50px)">
        <ServiceNotes ref="ServiceNotes" :customer-id="customerId" :id="item.id" :biz-type="2" biz-no="" module="呼叫工作台"/>
      </div>
      <!-- 产品信息 -->
      <div v-show="rightActiveTab === '2'" class="messagebox-content">
        <callcenter-product-info :call-detail="callDetail" @submit="e => bindProductId = e"></callcenter-product-info>
      </div>
      <!-- 客户评价 -->
      <div v-show="rightActiveTab === '3'" class="messagebox-content">
        <iframe v-if="satisfactionGray && callDetail.evaluated === 1" id="imIframe" :src="iframeUrl" height="98%" width="100%"/>
        <div v-else class="default">
          <no-data-view-new :notice-msg="$t('im.detail.tips1')"></no-data-view-new>
        </div>
      </div>

    </div>
    <!-- 添加到现有客户的对话框 -->
    <el-dialog
      :title="$t('callcenter.workbenchPage.title1')"
      :visible.sync="showTransferDialog"
      width="500px"
      @close="transferDialogClosed"
    >
      <!-- 底部区域 -->
      <el-form label-position="top" ref="transferCallRef" :model="transferRuleForm" :rules="transferFormRules">
        <el-form-item :label="$t('callcenter.callCenter.label3')" prop="consultAgNo">
          <el-select
            style="width: 100%"
            v-model="transferRuleForm.consultAgNo"
            clearable
            :placeholder="$t('common.placeholder.select')"
          >
            <el-option
              v-for="item in agentList"
              :key="item.id"
              :label="item.agent"
              :value="item.jobNum"
              :disabled="item.agSta!=1 && item.agSta!=3"
            >
              <div class="option-item">
                <span class="agNo">{{item.agent}}({{item.agentName}})</span>
                <span class="status">
                  <span class="q" :style="{'background-color':statusMap[item.agSta].color}"></span>
                  <span>{{statusMap[item.agSta].text}}</span>
                </span>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="transferDialogClosed">{{$t('common.button.cancel')}}</el-button>
        <el-button type="primary" @click="ctiConsultAgCallBack">{{$t('common.button.confirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { isOpenData } from '@src/util/platform'
import * as CallCenterApi from '@src/api/CallCenterApi'
import { ctiHangup,ctiConsultAg,ctiConsultReturn,ctiConsultTransfer } from '@src/util/ctisdk';
import ContactInfo from './ContactInfo.vue'
import ServiceRecord from './ServiceRecord.vue'
import { parse } from '@src/util/querystring';
import Page from '@model/Page';
import ServiceNotes from '@src/modules/im/imDetail/ServiceNotes.vue';
import { t } from '@src/locales';
import { getRootWindow } from '@src/util/dom';
/* mixin */
import ThemeMixin from '@src/mixins/themeMixin/index.ts'
// components
import CallcenterProductTable from '@src/modules/callcenter/component/CallcenterProductTable.vue';
import CallcenterProductInfo from '@src/modules/callcenter/component/CallcenterProductInfo.vue';
import NoDataViewNew from '@src/component/common/NoDataViewNew';

const statusMap = {
  "0":{
    text: t('callcenter.workbenchPage.unLogin'),
    color:'#7F7F7F'
  },
  "1":{
    text: t('callcenter.workbenchPage.hasLogged'),
    color:'#95F204'
  },
  "2":{
    text: t('callcenter.workbenchPage.busy'),
    color:'#F59A23'
  },
  "3":{
    text: t('callcenter.workbenchPage.idle'),
    color:'#95F204'
  },
  "4":{
    text: t('callcenter.workbenchPage.busyLine'),
    color:'#81D3F8'
  },
  "5":{
    text: t('callcenter.workbenchPage.afterBusyHandle'),
    color:'#8080FF'
  }
}

let callInterval;
export default {
  name: 'workbench',
  mixins: [ThemeMixin],
  data() {
    return {
      isOpenData,
      loading: false,
      params: {
        pageSize: 10,
        pageNum: 1,
      },
      recordListPage: new Page(),
      loadingListData: false,
      query: {},
      ringTime:'00:00',
      unkonwn: false,
      hoverIndex: -1, // 菜单hover索引
      activeLinkId: 0, // 当前激活的菜单id
      historyList: [],
      tabs: [
        {
          displayName: this.$t('callcenter.callDetailPage.linkmanInfo'),
          component: ContactInfo.name,
          show: true
        },
        {
          displayName: this.$t('common.base.serviceRecord'),
          component: ServiceRecord.name,
          show: true
        }
      ],
      currTab: 'contact-info',
      item: {},
      onCallItem:{},
      remarkList: [],
      showAddRemarkForm:false,
      categoryList: [],
      cascaderProps: {
        value: 'id',
        label: 'name',
        children: 'children'
      },
      selectedKeys: [],
      ruleForm: {
        sortId: '',
        status: '',
        remark: ''
      },
      rules: {
        status: [{ required: true, message: this.$t('common.validate.validateResolveStatus'), trigger: 'blur' }]
      },
      haveRing:false,
      ringState:null,
      transferFormRules: {
        consultAgNo: [
          { required: true, message: this.$t('common.validate.chooseYourAgent'), trigger: 'change' },
        ],
      },
      transferRuleForm: {
        consultAgNo: '', //咨询的坐席号
      },
      showTransferDialog: false,
      agentList: [],
      consultStatus:1,// 咨询状态  1：未咨询  2：咨询讯问中 3：咨询成功
      statusMap,
      isConsul:false, // 是否是客服A咨询转移过来的电话
      customerId: '',
      rightActiveTab: '1',
      iframeUrl: '',
      callDetail: {},
      bindProductId: '', // 绑定了产品展示新建工单按钮
    }
  },
  computed: {
    satisfactionGray() {
      const RootWindow = getRootWindow(window);
      return RootWindow.grayAuth?.satisfaction || false;
    },
    moreShow () {
      return this.recordListPage.hasNextPage;
    },
    showConsult(){
      let consultStatus = this.consultStatus
      let callType = this.query.callType
      if((consultStatus == 1 ||consultStatus == 2) && callType != 7) return true

      // if(this.isConsul) return true  TODO:目前只支持咨询一次
      return false
    }
  },
  mounted() {
    window.addEventListener('message',(event)=>{
      if(event?.data.type === 'telIsOver'){
        this.$refs.ServiceNotes.saveFormValueBeforeHandUp()
      }
      if(event?.data?.type=='setConsultStatus'){
        this.consultStatus = event.data.val
      }
      if(event?.data?.type=='setIsConsul'){
        this.isConsul = true
      }
    })

    let query = parse(window.location.search) || {};
    query.linkmanName = query.linkmanName?.trim() ?? ''
    this.query = query
    if(this.query.id && this.query.callPhone) {
      if(this.query.callState === 'phoneConnect'){
        let callSec = 0;
        callInterval = setInterval(()=>{
          callSec ++;
          this.getCallTime(callSec)
        }, 1000);
      } else {
        callInterval && clearInterval(callInterval)
        callInterval = null
      }
      // 说明是websocket过来的 获取联系人信息 
      this.item = {id:this.query.id, dialPhone:this.query.callPhone || '', dialCount:this.query.dialCount || 0}
      this.onCallItem = this.item
      this.activeLinkId = this.item.id 
    }
    // console.info('query::', this.query);
    // this.$eventBus.$on('callcenter-workbench.select_tab', this.selectTab)
    this.getHistoryList()
    this.getRemarkList()
    this.getCategoryList()

    // 获取当前的通话状态
    this.ringState = setInterval(()=>{
      window.parent.controlCallCenter().get().then(res=>{
        if(res){
          this.haveRing = true;
        }else{
          this.haveRing = false;
        }
      })
    }, 1000)


    this.getConversationInit();
  },
  beforeDestroy() {
    callInterval && clearInterval(callInterval)
    callInterval = null
    this.ringState = null;
    // this.$eventBus.$off('callcenter-workbench.select_tab', this.selectTab)
  },
  methods: {
    getConversationInit() {
      const query = parse(window.location.search) || {};
      const id = query.id;
      this.iframeUrl = `/pcoperation/task/evaluate?id=${id}&fromCallcenter=true`;
    },
    tabClick(tab) {
      const trackIdObj = {
        [ContactInfo.name]: 'CONTACT_INFORMATION_TAB',
        [ServiceRecord.name]: 'SERVICE_RECORD_TAB',
      }
      this.$track.clickStat(this.$track.formatParams(trackIdObj[tab.component]));
    },
    currentCallClick(){
      this.item = this.onCallItem
      this.activeLinkId = this.onCallItem.id
    },
    async hangUpCall(){
      try {
        ctiHangup()
        // 清除当前的通话状态
        window.parent.controlCallCenter().clear();
      } catch(error) {
        console.error(error);
      }
      // }
      this.$track.clickStat(this.$track.formatParams('HANG_UP'));
    },
   // 咨询坐席
    async ctiConsultAgCallBack() {
      this.$refs.transferCallRef.validate(async res => {
        if (!res) return;
        try {
          const param = {
            consultAgNo: this.transferRuleForm.consultAgNo,
          };
          let res = await ctiConsultAg(param);
          if(res){
            this.transferDialogClosed()
            this.consultStatus = 2
          }
        } catch (err) {
          console.log(err);
          this.$message.error(err|| this.$t('callcenter.workbenchPage.tips1'))
        }
      });
    },
    // 咨询接回
    async ctiConsultReturnCallBack(){
      try {
        let res = await ctiConsultReturn()
        if(res){
          this.$message.success(this.$t('callcenter.workbenchPage.tips2'))
          this.consultStatus = 1
        }
      }catch(err){
        console.log(err)
        this.$message.error(err||this.$t('callcenter.workbenchPage.tips3'))
      }
      this.$track.clickStat(this.$track.formatParams('CONSULTATION_RETURN'));
    },
    // 咨询转移
    async ctiConsultTransferCallBack(){
      try {
        let res = await ctiConsultTransfer()
        if(res){
          this.$message.success(this.$t('callcenter.workbenchPage.tips4'))
          this.consultStatus = 1
        }
      }catch(err){
        console.log(err)
        this.$message.error(err||this.$t('callcenter.workbenchPage.tips5'))
      }
      this.$track.clickStat(this.$track.formatParams('CONSULTING_TRANSFER'));
    },
    async transferClick() {
      try{
        const {code,result,message} = await CallCenterApi.getAgentMonitor()
        if(code==0){
          let currentAgNo = window.parent.controlCallCenter().getAgNo()
          this.agentList = result.filter(v=>v.jobNum != currentAgNo)
          this.showTransferDialog = true;
        }else{
          this.$message.error(message)
        }
      }catch(err){
        console.log(err)
      }
      this.$track.clickStat(this.$track.formatParams('CONSULTING_SEATS'))
    },
    transferDialogClosed() {
      this.showTransferDialog = false;
      this.$refs.transferCallRef.resetFields()
    },
    async getMore () {
      try {
        this.params.pageNum++;
        this.loading = true;
        let recordListPage = await CallCenterApi.getTodayCallRecordList(this.params);
        if(recordListPage.code == 0) {
          this.recordListPage.merge(Page.as(recordListPage.result));
        }
        this.loading = false;
      } catch(error) {
        console.error(error);
      }
    },
    getCallTime(sec){
      const HOUR_SEC = 60 * 60;
      const MIN_SEC = 60;
      let hour = sec / HOUR_SEC >> 0;
      sec = sec % HOUR_SEC;
      let min = sec / MIN_SEC >> 0;
      sec = sec % MIN_SEC;
      hour = hour > 0 && hour < 10 ? `0${ hour }` : hour;
      min = min < 10 ? `0${ min }` : min;       
      sec = sec < 10 ? `0${ sec }` : sec;
      // console.info('temp:', hour == 0 ? `${ min }:${ sec }` : `${ hour }:${ min }:${ sec }`);
      this.ringTime = hour == 0 ? `${ min }:${ sec }` : `${ hour }:${ min }:${ sec }`;
    },
    // 获取服务备注列表
    getRemarkList(){
      const params = {
        recordId: this.item.id
      }
      if(!this.item.id) return
      CallCenterApi.getFwRemarkList(params).then(({code, message, result}) => {
        if (code != 0) return this.$message.error(message || this.$t('callcenter.callCenter.innerError'))
        this.remarkList = result || []
      }).catch((err) => {
        console.error(err)
      })
    },
    // 获取咨询分类列表
    getCategoryList(){
      CallCenterApi.getZxSortList().then(({code, message, result}) => {
        if (code !== 0) return this.$message.error(message || this.$t('callcenter.callCenter.innerError'))
        this.categoryList = result || []
      }).catch((err) => {
        console.error(err)
      })
    },
    // 选择项发生变化触发这个函数
    parentCateChanged() {
      // 如果 selectedKeys 数组中的 length 大于0，证明选中父级分类
      if (this.selectedKeys.length > 0) {
        this.ruleForm.sortId = this.selectedKeys[this.selectedKeys.length - 1]
      } else {
        this.ruleForm.sortId = 0
      }
    },
    // 今日通话记录
    async getHistoryList(){
      try {
        this.recordListPage.list = [];
        this.params.pageNum = 1;
        this.loading = true;
        let recordListPage = await CallCenterApi.getTodayCallRecordList(this.params);
        if(recordListPage.code == 0) {
          this.recordListPage.merge(Page.as(recordListPage.result));
          if(!this.query.linkmanName && this.query.callState !== 'phoneConnect') {
            if(this.recordListPage.list.length) {
              this.item = this.recordListPage.list[0]
              this.getRemarkList()
              this.activeLinkId = this.item.id
            }
          }
        }
        this.loading = false;
      } catch(error) {
        console.error(error);
      }
    },
    handleHistoryItem(item, index) {
      this.activeLinkId = item.id
      this.item = item
      this.getRemarkList();
    },
    // 刷新列表
    refreshList() {
      const activeLinkId = this.activeLinkId;
      this.getHistoryList();
      const item = this.recordListPage.list.find(v => v.id === activeLinkId)
      if (item) this.handleHistoryItem();
    },
    async delHistoryItem(index, item) {
      try {
        const {code, message} = await CallCenterApi.deleteTodayCallRecord({id:item.id})
        if (code !== 0) return this.$platform.notification({
          title: this.$t('common.base.tip.deleteFail'),
          message: message || '',
          type: 'error',
        })
        this.recordListPage.list.splice(index, 1)
        this.$platform.notification({
          title: this.$t('common.base.tip.deleteSuccess'),
          type: 'success',
        })
      } catch (e) {
        console.error(e)
      }
    },
    selectTab(tab) {
      this.currTab = tab
    },
    saveRemark(formName) {
      this.$refs[formName].validate(async valid => {
        if (!valid) {
          return false
        } 
        if(!this.item.id) return this.$platform.notification({
          title: this.$t('common.base.tip.operationFail'),
          message: this.$t('common.validate.chooseOneCallRecord'),
          type: 'error',
        })
        const params = this.ruleForm
        params.recordId = this.item.id
        try {
          const {code, message} = await CallCenterApi.saveFwRemark(params)
          if (code !== 0) return this.$platform.notification({
            title: this.$t('common.base.tip.saveFail'),
            message: message || '',
            type: 'error',
          })
          this.$refs[formName].resetFields()
          this.selectedKeys = []
          this.getRemarkList()
          this.$platform.notification({
            title: this.$t('common.base.tip.saveSuccess'),
            type: 'success',
          })
        } catch (e) {
          console.error(e)
        }
      })
    },
    async delRemark(item, index){
      try {
        if (!await this.$platform.confirm(this.$t('callcenter.callDetailPage.confirmDeleteRemark'))) return;
        const {code, message} = await CallCenterApi.deleteFwRemark({id:item.id})
        if (code !== 0) return this.$platform.notification({
          title: this.$t('common.base.tip.deleteFail'),
          message: message || '',
          type: 'error',
        });
        this.getRemarkList()
        this.$platform.notification({
          title: this.$t('common.base.tip.deleteSuccess'),
          type: 'success',
        });
      } catch (e) {
        console.error(e);
      }
    },
    updateCustomerId(id) {
      this.customerId = id
    },
  },
  components: {
    ServiceNotes,
    [ContactInfo.name]: ContactInfo,
    [ServiceRecord.name]: ServiceRecord,
    CallcenterProductTable,
    CallcenterProductInfo,
    NoDataViewNew,
  }
}
</script>

<style lang="scss">
.el-cascader-menus .el-cascader-menu__item{
  padding: 8px 15px;
  display: flex;
  line-height: 21px;
}
.el-cascader-menus .el-cascader-menu__item div{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 120px!important;
}
.item-hover {
  background-color: #fafafa;
}
.item-active {
  // 链接菜单激活样式
  background-color: #f5f5f5;
  border-left: 3px solid #55B7B4;
}

.call-center-workbench-zhongTong {
  h4 {
    font-size: 16px;
    font-weight: 600;
  }
  display: flex;
  padding: 10px;
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  max-width: 100vw;
  .left {
    width: 20%;
    min-width: 270px;
    overflow: hidden;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    .el-card__header {
      padding: 13px 20px;
    }
    .current-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px 10px !important;
      border-bottom: 1px solid #ebeef5;
      box-sizing: border-box;
      background: #fff;
      font-size: 16px;
      color: #051A13;
      height: 50px;
      font-weight: 600;
      .btn-wrap {
        display: flex;
        .el-button--mini {
          padding: 6px 7px !important;
          border-radius: 3px !important;
        }
        .el-button + .el-button {
          margin-left: 8px !important;
        }
      }
    }
    .current-card {
      box-shadow: 0 0 0 0;
      border: none;
      cursor: pointer;
      .el-card__body {
        padding: 10px 15px;
        .current-item {
          .item {
            display: flex;
            justify-content: flex-end;
            p {
              flex: 1;
              margin-bottom: 4px;
            }
            i,
            span {
              color: #999;
            }
          }
        }
      }
      &.active {
      .el-card__body{
        background: #f5f5f5;
        border-left: 3px solid $color-primary;
      }
    }
    }
    .history-card {
      box-shadow: 0 0 0 0;
      border-radius: 0 0 4px 4px;
      .el-card__body {
        overflow: auto;
        max-height: 800px;
        padding: 0;
        .history-item {
          padding: 12px 15px;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #e0e1e2;
          cursor: pointer;

          .icon-fe-close {
            margin-right: 10px;
          }
          .current-item {
            flex: 1;
            .item {
              display: flex;
              justify-content: space-between;
              p {
                margin-bottom: 4px;
              }
              i,
              span {
                color: #999;
              }
            }
          }
        }
      }
      .call-center-list-footer {
        text-align: center;
        margin-top: 10px;
        height: 30px;
        line-height: 30px;
        color: #8C8989;
      }
      .call-center-list-footer-more {
        margin: 0;
        padding: 0;
        outline: none;
        border: none;
        background: none;
        color: #8C8989;
        &:hover {
          color: #55B7B4;
        }
      }
      .job-notification-dividing-line {
        width: 2px;
        height: 15px;
        background: #fff;
        position: absolute;
        right: 113px;
        top: 28px;
        z-index: 100;
      }
      .call-center-list-footer-line {
        position: relative;
        bottom: 4px;
        display: inline-block;
        background: #D0D0D0;
        height: 1px;
        width: 18px;
      }
      .call-center-list-footer-text {
        padding: 0 16px;
      }
    }

    .el-card__header {
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }

  }

  .main {
    flex: 1;
    background: #fff;
    border-right: 1px solid #f5f5f5;
  }
  .right {
    overflow: auto;
    /* max-height: 100vh; */
    background: #ffffff;
    width: 400px;
    min-width: 330px;
    padding: 10px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    .item {
      margin-bottom: 10px;
      border-bottom: 1px solid #f5f5f5;
      .item-title {
        display: flex;
        justify-content: space-between;
        h4{
          font-size: 14px;
          margin-bottom: 10px;
          margin-left: 8px;
          font-weight:600;
        }
      }
      .item-header {
        display: flex;
        align-items: center;
        p {
          flex: 1;
          margin-bottom: 10px;
          margin-left: 8px;
        }
      }
      .item-isDelete {
        display: flex;
        justify-content: space-between;
        color: #fb602c;
        height: 42px;
        font-size: 14px;
        line-height: 42px;
        .delete-time {
          color: #666;
          font-size: 12px;
        }
      }
      .item-content {
        padding: 5px;
        p {
          padding: 10px 2px;
          color: #737f7b;
        }
        .el-tag--small {
          overflow: hidden;
        }
        .sort {
          width: 90px;
          white-space: nowrap;
          text-overflow: ellipsis;
          margin-right: 8px;
        }
      }
    }
    .el-textarea__inner{
      padding: 5px 10px;
    }

    .el-cascader__label{
      max-width: 160px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }


    .messagebox-content {
      overflow-y: auto;
      height: calc(100vh - 150px);
      padding: 10px;
      .iconfont-wrap {
        font-size: 12px;
        color: #262626;
        i {
          color: #13c2c2;
        }
        height: 30px;
        text-align: center;
        line-height: 30px;
      }
      .chat-content {
        padding-top: 20px;
        img {
          width: 36px;
          height: 36px;
        }
        font-size: 14px;
        .info {
          display: flex;
          .info-content {
            max-width: 300px;
            margin-left: 8px;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 0 8px 8px 8px;
            word-wrap: break-word;
            color: #595959;
          }
        }
        .info-time {
          margin-left: 44px;
          font-size: 12px;
          margin-top: 5px;
          color: #bfbfbf;
        }
        .info-status {
          align-self: flex-end;
          font-size: 12px;
          color: #bfbfbf;
          margin-left: 4px;
        }
        .word-my {
          .info {
            display: flex;
            justify-content: flex-end;
            .info-status {
              margin-right: 4px;
            }
            .info-content {
              margin: 0 8px 0 0;
              background: rgba(19, 194, 194, 0.08);
              border: 1px solid rgba(0, 209, 178, 0.32);
              border-radius: 8px 0 8px 8px;
              color: #595959;
            }
          }
          .info-time {
            text-align: right;
            margin-right: 44px;
          }
        }
        .msg-img {
          width: 90px;
          height: 120px;
          margin-right: 10px;
          object-fit: contain;
        }
        .file-content {
          display: flex;
          max-width: 80%;
          padding: 10px;
          .file-img {
            width: 40px;
            height: 40px;
            margin-right: 10px;
          }
          p {
            margin-bottom: 4px;
          }
          a {
            color: #13c2c2 !important;
          }
        }
      }
    }
  }
}
.option-item{
  display: flex;
  justify-content: space-between;
  .status{
    display: flex;
    align-items: center;
    .q{
      background: red;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 6px;
    }
  }
}
</style>

<style lang="scss" scoped>
::v-deep .el-tabs {
  height: auto;
}
</style>